<template>
  <view class="box-reservation">
    <view class="r-body">
      <block v-if="isHas">
        <view class="r-header">
          <image :src="`${$imgUrl}${goodsInfo.image}`" mode="scaleToFill" />
          <view class="r-h-r">{{ goodsInfo.title }}</view>
        </view>
        <view class="goods-box">
          <view class="price-box" v-if="choose_sku_price">HK$<span>{{ total_price }}</span></view>
          <view class="price-box" v-else>請選擇</view>
          <view class="goods-title u-ellipsis-2">已選：<text v-for="(item,index) in choose_sku_desc" :key="index">{{ item }}/</text>数量{{ quantityPurchase }}</view>
        </view>
        <view class="buy-num-box" v-for="(item,index) in skuList" :key="index">
          <view class="num-title">{{ item.name }}</view>
          <view class="cell-sku">
            <view class="item-sku" :class="subItem.checked?'active':''" @tap="chooseSku(item,index,subItem,subIndex)" v-for="(subItem,subIndex) in item.children">{{ subItem.name }}</view>
          </view>
        </view>
        <view class="buy-num-box p-b-20">
          <view class="num-title">购买数量</view>
          <u-number-box :min="1" :step="1" v-model="quantityPurchase" @change="handleQuantity()"></u-number-box>
        </view>
        <view class="buy-num-box">
          <view class="num-title">姓名</view>
          <view class="cell-input">
            <input type="text" v-model.trim="username" placeholder="請輸入您的姓名" placeholder-style="font-size:14px;color:#999">
          </view>
        </view>
        <view class="buy-num-box">
          <view class="num-title">聯系方式</view>
          <view class="cell-input">
            <input type="text" v-model.trim="phone" placeholder="請輸入您的聯系方式" placeholder-style="font-size:14px;color:#999">
          </view>
        </view>
        <view class="tabbar-foot safe-area-inset-bottom">
          <view class="detail-foot_box safe-area-inset-bottom u-col-ceter u-row-around">
            <view class="detail-btn-box"><button class="u-reset-button  score-btn" @tap="handleSubmit()">確認預約</button></view>
          </view>
        </view>
      </block>
      <!-- 预约成功 -->
      <block v-else>
        <view class="r-r-body">
          <image src="/static/images/home/icon_yuyue.png" mode="scaleToFill" />
          <view class="r-title">預約信息提交成功！</view>
          <view class="r-end-btn" @tap="goHome()">返回首頁</view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
import {productDetail,productReservation} from './../../utils/api'
import {productCalculatprice} from './../../utils/userApi'
export default {
	data() {
		return {
      isHas:true,
			skuList:[],
			goodsInfo:{},
      companyInfo:{},
			skuPrice:[],
			p_id:0,
			choose_sku_price:'',
			choose_sku_desc:[],
			quantityPurchase:1,
      phone:'',
      username:'',
      choose_price_id:0,
			choose_ids:[],
			sku_arr:[],
      choose_sku_id:0,
    }
  },
  computed: {
    total_price(){
			return parseFloat(this.choose_sku_price)*this.quantityPurchase
		}
  },
  onLoad(options) {
    this.isHas=true
    this.p_id=options.id
    this.getGoodsDetail(this.p_id)
  },
  methods:{
    goHome(){
      uni.reLaunch({ url: '/pages/index/index' })
    },
    handleSubmit(){
      if(this.choose_sku_price){
        if(this.username){
          if(this.phone){
            this.submitForm()
          }else{
            uni.showToast({
              title: '請輸入聯繫方式',
              icon: 'none'
            })
          }
        }else{
          uni.showToast({
            title: '請輸入姓名',
            icon: 'none'
          })
        }
      }else{
        uni.showToast({
					title: '請選擇商品規格',
					icon: 'none'
				})
      }
    },
    async submitForm(){
      let obj={
        product_id:this.p_id,
        skuPrice_id:this.skuList.length>0?this.choose_sku_id:'',
        price:this.total_price,
        num:this.quantityPurchase,
        username:this.username,
        phone:this.phone,
      }
      let res = await productReservation(obj)
      if(res.code==1){
        this.isHas=false
      }else{
        this.isHas=true
        uni.showToast({
					title: res.msg||'系統異常',
					icon: 'none'
				})
      }
    },
		handleQuantity(){
			// if(this.choose_sku_price){
			// 	this.choose_sku_price=parseFloat(this.choose_sku_price)*this.quantityPurchase
			// }
      if(this.skuList.length>0){
        this.getPrice()
      }
		},
    chooseSku(item,index,subItem,subIndex){
			item.children=item.children.map(v=>{
				return {...v,checked:false}
			})
			subItem.checked=!subItem.checked
			item.children[subIndex]=subItem
			this.skuList[index]=item
			let list=this.skuList
			let choose_ids=[]
			let choose_sku_desc=[]
			for(let i=0;i<list.length;i++){
				let sku_item=list[i]
				if(sku_item.children.length>0){
					for(let j=0;j<sku_item.children.length;j++){
						if(sku_item.children[j].checked){
							choose_ids.push(sku_item.children[j].id)
							choose_sku_desc.push(sku_item.children[j].name)
						}
					}
				}
			}
			this.choose_ids=choose_ids
			this.choose_sku_desc=choose_sku_desc
			if(this.sku_arr.length==this.choose_ids.length){
				this.getPrice()
			}
		},
		async getPrice(){
			let params={
				product_id:this.goodsInfo.id,
				sku_id:this.choose_ids.join(','),
				num:this.quantityPurchase
			}
			let res=await productCalculatprice(params)
			if(res.code==1){
				this.choose_sku_price=res.data.price
        this.choose_sku_id=res.data.id
			}else{
				uni.showToast({
					title: res.msg||'系統異常',
					icon: 'none'
				})
			}
		},
		computedPrice(){
			let str=this.choose_ids.join(',')
			let list=this.skuPrice
			let list_checked=list.filter(v=>v.product_sku_ids==str)
			this.choose_sku_price=list_checked[0].price
      this.choose_price_id=list_checked[0].id
		},
		async getGoodsDetail(id) {
			let that = this;
			that.loadStatus = 'loading';
			let res = await productDetail({id:id})
			if (res.code === 1) {
				that.showEmpty = false;
				that.goodsInfo = res.data.detail;
				that.companyInfo=res.data.company
				let s_list=res.data.detail.images_arr
				let s_list_new=[]
				if(s_list.length>0){
					for(let i=0;i<s_list.length;i++){
						s_list_new.push(`${this.$imgUrl}${s_list[i]}`)
					}
				}
				that.swiperImages=s_list_new
				that.skuPrice=res.data.skuPrice
        if(res.data.skuList.length==0){
          that.choose_sku_price=res.data.detail.price
        }else{
          let sku_list=res.data.skuList
          that.sku_arr=res.data.skuList
          let sku_list_new=[]
          for(let i=0;i<sku_list.length;i++){
            let sku_item=sku_list[i]
            if(sku_item.children.length>0){
              for(let j=0;j<sku_item.children.length;j++){
                sku_item.children[j].checked=false
              }
            }
            sku_list_new.push(sku_item)
          }
          that.skuList=sku_list_new
        }
			}else{
				uni.showToast({
					title: res.msg||'系統異常',
					icon: 'none'
				})
			}
		},
  }
}
</script>
<style lang="scss" scoped>
.box-reservation{
  width: 100%;
}
.r-body{
  width: calc(100% - 20px);
  padding: 10px;
  margin: 10px auto;
  background: #fff;
}
.r-header{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding-bottom: 10px;
  border-bottom: 0.5px solid #DDDDDD;
  image{
    display: block;
    width: 70px;
    height: 70px;
    border-radius: 10px;
    border: 1px solid #ccc;
    margin-right: 10px;
  }
  .r-h-r{
    font-weight: 500;
    font-size: 15px;
    color: #333333;
    line-height: 21px;
  }
}
// 商品卡片
.goods-box {
  width: 100%;
  align-items: flex-start;
  border-bottom: 0.5px solid #DDDDDD;
  padding-bottom: 13px;
  .goods-title {
    text-align: left;
    font-size: 12px;
    color: #333333;
    line-height: 13px;
  }
  .price-box {
    font-size: 15px;
    font-weight: bold;
    color: #FF5A14;
    line-height: 32px;
    margin: 10px 0 2px 0;
    span{
      font-size: 24px;
      font-weight: bold;
      margin-left: 2px;
    }
  }
}
.p-b-20{
  padding-bottom: 20px;
  border-bottom: 0.5px solid #DDDDDD;
}
.cell-input{
  width: 220px;
  height: 35px;
  line-height: 35px;
  background: #F2F2F2;
  border-radius: 5px;
  font-size: 14px;
  color: #999999;
  line-height: 20px;
  margin-bottom: 20px;
  input{
    height: 100%;
    padding: 0 12px;
  }
}
.detail-foot_box .detail-btn-box .score-btn{
  width: calc(100% - 20px);
  margin: 0 auto;
  height: 44px;
  background: #FFFFFF;
  border-radius: 8px;
  font-weight: 500;
  font-size: 15px;
  color: #FFFFFF;
  line-height: 44px;
  background: linear-gradient( 90deg, #016CF1 0%, #0697F6 100%);
}
.r-r-body{
  width: 100%;
  text-align: center;
  image{
    margin: 100px auto 15px;
    display: block;
    width: 100px;
    height: 100px;
  }
  .r-title{
    font-weight: 500;
    font-size: 15px;
    color: #333333;
    line-height: 21px;
  }
  .r-end-btn{
    width: 187px;
    height: 44px;
    background: linear-gradient( 90deg, #016CF1 0%, #0697F6 100%);
    border-radius: 8px;
    margin: 24px auto 0;
    font-weight: 500;
    font-size: 15px;
    color: #FFFFFF;
    line-height: 44px;
  }
}
.buy-num-box{
  padding-top: 20px;
  .num-title{
    height: 21px;
    font-weight: bolder;
    font-size: 15px;
    color: #333333;
    line-height: 21px;
    margin-bottom: 10px;
  }
}
.cell-sku{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  view{
    border-radius: 8px;
    padding: 5px 12px;
    background: #F2F2F2;
    font-size: 14px;
    color: #333333;
    line-height: 20px;
    margin-left: 10px;
  }
  view:first-child{
    margin-left: 0;
  }
  view.active{
		border: 1px solid #1C7AF7;
		background-color: #fff;
	}
}
</style>